/**
 * Sidebar
 */

@use '../../../css/mixins/components';
@use '../../../css/mixins/config';
@use '../../../css/functions/properties';

@mixin sidebar-wrapper-collapse {
    &.-collapse-fixed {
        position: fixed;
        top: 0;
    }

    &.-collapse-absolute {
        position: absolute;
    }

    &.-collapse-fixed,
    &.-collapse-absolute {
        width: 100%;
        height: 100%;
    }
}

.sidebar-wrapper {
    @include components.z-index('sidebar');
    @include components.width('sidebar');

    position: relative;
    min-height: 100%;
    min-width: 0;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;

    &.-collapse-relative {
        &.-placement-left .sidebar {
            right: 0;
        }

        &.-placement-right .sidebar {
            left: 0;
        }
    }

    &.-collapse-absolute,
    &.-collapse-fixed {
        &.-placement-left .sidebar {
            left: 0;
        }

        &.-placement-right .sidebar {
            right: 0;
        }
    }

    .sidebar-overlay {
        @include components.background('sidebar', 'overlay');
        @include components.border-top-left-radius('sidebar');
        @include components.border-bottom-left-radius('sidebar');

        width: 100%;
        height: 100%;
        z-index: 0;
    }

    @each $breakpoint in config.$breakpoint-keys {
        &.-collapse-#{$breakpoint} {
            @include config.breakpoint-down($breakpoint) {
                @include sidebar-wrapper-collapse;
            }
        }
    }

    &.-collapse-true {
        @include sidebar-wrapper-collapse;
    }

    &.sidebar-wrapper-transition-enter-to,
    &.sidebar-wrapper-transition-leave {
        @include components.width('sidebar');
    }
}

.sidebar {
    @include components.background('sidebar');
    @include components.box-shadow('sidebar');
    @include components.border-width('sidebar');
    @include components.border-style('sidebar');
    @include components.border-color('sidebar');
    @include components.border-radius('sidebar');
    @include components.color('sidebar');
    @include components.padding('sidebar');
    @include components.transition('sidebar');
    @include components.width('sidebar');

    position: absolute;
    height: 100%;
    z-index: 1;

    .sidebar-content {
        height: 100%;
        width: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;

        // Hack for fixing margin collapse bug
        // https://github.com/ant-design/ant-design/issues/7967
        // solution from https://stackoverflow.com/a/33132624/3040605
        padding-top: 0.1px;
        margin-top: -0.1px;

        .collapsible .collapsible-item {
            box-shadow: none;
        }

        .nav.-vertical .nav-item,
        .collapsible .collapsible-item .collapsible-header {
            @include components.background('sidebar', 'item', true);
            @include components.border-radius('sidebar', 'item', true);
            @include components.color('sidebar', 'item', true);
            @include components.font-size('sidebar', 'item', true);
            @include components.padding('sidebar', 'item', true);
            @include components.transition('sidebar', 'item', true);

            width: 100%;

            &:not(.-active, .-disabled) {
                &:hover,
                &.-hover {
                    @include components.background('sidebar' 'item', 'hover', true);
                    @include components.color('sidebar' 'item', 'hover', true);
                }

                &:focus,
                &.-focus {
                    @include components.background('sidebar' 'item', 'focus', true);
                    @include components.color('sidebar' 'item', 'focus', true);
                }
            }

            &:active,
            &.-active {
                @include components.background('sidebar' 'item', 'active', true);
                @include components.color('sidebar' 'item', 'active', true);
            }
        }

        .collapsible {
            .collapsible-item > .collapsible-header > .icon {
                background: properties.color('sidebar', 'item', true);
            }

            width: 100%;
        }
    }
}

/**
 * Sidebar animation
 */

//
// Sidebar Wrapper
//
.sidebar-wrapper-transition-enter-active,
.sidebar-wrapper-transition-leave-active {
    transition: width #{properties.transition-duration('sidebar')} #{properties.transition-timing-function(
            'sidebar'
        )};
}

.sidebar-wrapper-none-transition-enter-active,
.sidebar-wrapper-none-transition-leave-active {
    transition: none #{properties.transition-duration('sidebar')} #{properties.transition-timing-function(
            'sidebar'
        )};
}

.sidebar-wrapper-transition-enter-from,
.sidebar-wrapper-transition-leave-to {
    width: 0;
}

//
// Sidebar
//
.sidebar-transition-enter-active,
.sidebar-transition-leave-active {
    transform-origin: left;
}

.sidebar-transition-enter-from,
.sidebar-transition-leave-to {
    transform: translateX(-100%);
}

.sidebar-transition-enter-to,
.sidebar-transition-leave-from {
    transform: translateX(0);
}

.sidebar-wrapper.-placement-right {
    .sidebar-transition-enter-active,
    .sidebar-transition-leave-active {
        transform-origin: right;
    }

    .sidebar-transition-enter-from,
    .sidebar-transition-leave-to {
        transform: translateX(100%);
    }
}

//
// Sidebar Overlay
//
.sidebar-overlay-transition-enter-active,
.sidebar-overlay-transition-leave-active {
    transition: opacity #{properties.transition-duration('sidebar')} #{properties.transition-timing-function(
            'sidebar'
        )};
}

.sidebar-overlay-transition-enter-from,
.sidebar-overlay-transition-leave-to,
.sidebar-overlay-transition-leave-active {
    opacity: 0;
}
